﻿<!DOCTYPE html>
<html>
<head>
    <head>
        <meta charset="UTF-8">
        <title>交易统计</title>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">

        <style>

            .box {
                width: 750px;
                height: 420px;

                float: left;
            }

            .box1 {
                width: 380px;
                height: 380px;

                float: right;
            }

            .box2 {
                width: 1200px;
                height: 450px;
                margin: auto;
                float: contour;
            }

            .box3 {
                width: 240px;
                height: 89px;

                float: right;
            }

        </style>
    </head>
</head>
<body>

<div id="app">

    <div class="box3">
        <el-radio-group v-model="radio1">

            <el-radio-button label="昨日">
            </el-radio-button>

            <el-radio-button label="7天">
            </el-radio-button>

            <el-radio-button label="30天">
            </el-radio-button>

        </el-radio-group>
    </div>

    <div class="box2" v-show="radio1=='30天'">
        <div>
            <div class="box">
                <h3>30天统计</h3>
                <template>
                    <el-table
                            :data="tableData30"
                            stripe="true"
                            border
                            style="width: 720px">
                        <el-table-column
                                prop="browsePeople"
                                label="浏览人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPeople"
                                label="下单人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="allOrderNum"
                                label="订单数">
                        </el-table-column>
                        <el-table-column
                                prop="allGoodsNum"
                                label="下单件数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="orderSuccessfulNum"
                                label="有效订单"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="placeMoney"
                                label="下单金额">
                        </el-table-column>
                    </el-table>
                    <el-table
                            :data="tableData30"
                            stripe="true"
                            border
                            style="width: 720px">
                        <el-table-column
                                prop="refundMoney"
                                label="退款金额"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="paymentPeople"
                                label="付款人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="payOrderNum"
                                label="付款订单">
                        </el-table-column>
                        <el-table-column
                                prop="payGoodsNum"
                                label="付款件数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="payMoney"
                                label="付款金额"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="consumption"
                                label="客单价">
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <div class="box1">
                <div id="main0" style="width: 360px;height:360px;"></div>
            </div>
        </div>
    </div>

    <div class="box2" v-show="radio1=='7天'">
        <div>
            <div class="box">
                <h3>7天统计</h3>
                <template>
                    <el-table
                            :data="tableData7"
                            stripe="true"
                            border
                            style="width: 720px">
                        <el-table-column
                                prop="browsePeople"
                                label="浏览人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPeople"
                                label="下单人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="allOrderNum"
                                label="订单数">
                        </el-table-column>
                        <el-table-column
                                prop="allGoodsNum"
                                label="下单件数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="orderSuccessfulNum"
                                label="有效订单"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="placeMoney"
                                label="下单金额">
                        </el-table-column>
                    </el-table>
                    <el-table
                            :data="tableData7"
                            stripe="true"
                            border
                            style="width: 720px">
                        <el-table-column
                                prop="refundMoney"
                                label="退款金额"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="paymentPeople"
                                label="付款人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="payOrderNum"
                                label="付款订单">
                        </el-table-column>
                        <el-table-column
                                prop="payGoodsNum"
                                label="付款件数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="payMoney"
                                label="付款金额"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="consumption"
                                label="客单价">
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <div class="box1">
                <div id="main1" style="width: 360px;height:360px;"></div>
            </div>
        </div>
    </div>

    <div class="box2" v-show="radio1=='昨日'">
        <div>
            <div class="box">
                <h3>昨日统计</h3>
                <template>
                    <el-table
                            :data="tableData1"
                            stripe="true"
                            border
                            style="width: 720px">
                        <el-table-column
                                prop="browsePeople"
                                label="浏览人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPeople"
                                label="下单人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="allOrderNum"
                                label="订单数">
                        </el-table-column>
                        <el-table-column
                                prop="allGoodsNum"
                                label="下单件数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="orderSuccessfulNum"
                                label="有效订单"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="placeMoney"
                                label="下单金额">
                        </el-table-column>
                    </el-table>
                    <el-table
                            :data="tableData1"
                            stripe="true"
                            border
                            style="width: 720px">
                        <el-table-column
                                prop="refundMoney"
                                label="退款金额"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="paymentPeople"
                                label="付款人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="payOrderNum"
                                label="付款订单">
                        </el-table-column>
                        <el-table-column
                                prop="payGoodsNum"
                                label="付款件数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="payMoney"
                                label="付款金额"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="consumption"
                                label="客单价">
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <div class="box1">
                <div id="main2" style="width: 360px;height:360px;"></div>
            </div>
        </div>
    </div>

    <div class="box2">
        <div id="main" style="width: 1200px;height:400px;"></div>
    </div>

</div>

</body>


<script src="/js/util.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/echarts.min.js"></script>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],   //最近30条数据,接受后台数据
                tableData1: [],
                tableData7: [],
                tableData30: [],
                placeMoney: 0,   //总订单额
                refundMoney: 0,  //总退款额
                payMoney: 0,     //总支付金额
                onePeople: 0,    //客单价(总支付金额/总付款人数)
                allGoodsNum: 0,  //总商品量
                allOrderNum: 0,  //总订单量
                orderSuccessfulNum: 0,   //有效订单
                payOrderNum: 0,  //付款订单量
                payGoodsNum: 0,  //付款商品量
                browsePeople: 0,     //浏览人数
                ordersPeople: 0,     //下单人数
                paymentPeople: 0,    //付款人数
                startTime: '',   //被统计的日期
                radio1: '昨日'
            }
        },
        created() {
            this.fetchMonthData();
        },
        methods: {
            //30天数据
            fetchMonthData() {
                axios.get(`/categoryReport/findOneMonth.do`).then(response => {
                    this.tableData = response.data;

                    this.radio1 = '昨日';

                    this.tableData1 = [];
                    this.tableData7 = [];
                    this.tableData30 = [];
                    //解决浅拷贝问题(不同对象截取同意对象数据时,数据出现累加)
                    var star = JSON.stringify(this.tableData[0]);
                    var obj = JSON.parse(star);
                    var star2 = JSON.stringify(this.tableData[0]);
                    var obj2 = JSON.parse(star2);
                    var star3 = JSON.stringify(this.tableData[0]);
                    var obj3 = JSON.parse(star3);

                    this.tableData1.push(obj);
                    this.tableData7.push(obj2);
                    this.tableData30.push(obj3);

                    this.tableData1[0].placeMoney = this.tableData1[0].placeMoney / 100;
                    this.tableData1[0].refundMoney = this.tableData1[0].refundMoney / 100;
                    this.tableData1[0].payMoney = this.tableData1[0].payMoney / 100;
                    this.tableData1[0].consumption=(this.tableData1[0].payMoney/this.tableData1[0].paymentPeople).toFixed(2);
                    //30天数据累加
                    for (let i = 1; i < 29 && i < this.tableData.length; i++) {
                        this.tableData30[0].placeMoney += this.tableData[i].placeMoney;
                        this.tableData30[0].refundMoney += this.tableData[i].refundMoney;
                        this.tableData30[0].payMoney += this.tableData[i].payMoney;
                        this.tableData30[0].allGoodsNum += this.tableData[i].allGoodsNum;
                        this.tableData30[0].allOrderNum += this.tableData[i].allOrderNum;
                        this.tableData30[0].orderSuccessfulNum += this.tableData[i].orderSuccessfulNum;
                        this.tableData30[0].payOrderNum += this.tableData[i].payOrderNum;
                        this.tableData30[0].payGoodsNum += this.tableData[i].payGoodsNum;
                        this.tableData30[0].browsePeople += this.tableData[i].browsePeople;
                        this.tableData30[0].ordersPeople += this.tableData[i].ordersPeople;
                        this.tableData30[0].paymentPeople += this.tableData[i].paymentPeople;
                    }
                    this.tableData30[0].placeMoney = this.tableData30[0].placeMoney / 100;
                    this.tableData30[0].refundMoney = this.tableData30[0].refundMoney / 100;
                    this.tableData30[0].payMoney = this.tableData30[0].payMoney / 100;
                    this.tableData30[0].consumption=(this.tableData30[0].payMoney/this.tableData30[0].paymentPeople).toFixed(2);
                    //7天数据累加
                    for (let i = 1; i < 6 && i < this.tableData.length; i++) {
                        this.tableData7[0].placeMoney += this.tableData[i].placeMoney;
                        this.tableData7[0].refundMoney += this.tableData[i].refundMoney;
                        this.tableData7[0].payMoney += this.tableData[i].payMoney;
                        this.tableData7[0].allGoodsNum += this.tableData[i].allGoodsNum;
                        this.tableData7[0].allOrderNum += this.tableData[i].allOrderNum;
                        this.tableData7[0].orderSuccessfulNum += this.tableData[i].orderSuccessfulNum;
                        this.tableData7[0].payOrderNum += this.tableData[i].payOrderNum;
                        this.tableData7[0].payGoodsNum += this.tableData[i].payGoodsNum;
                        this.tableData7[0].browsePeople += this.tableData[i].browsePeople;
                        this.tableData7[0].ordersPeople += this.tableData[i].ordersPeople;
                        this.tableData7[0].paymentPeople += this.tableData[i].paymentPeople;
                    }
                    this.tableData7[0].placeMoney = this.tableData7[0].placeMoney / 100;
                    this.tableData7[0].refundMoney = this.tableData7[0].refundMoney / 100;
                    this.tableData7[0].payMoney = this.tableData7[0].payMoney / 100;
                    this.tableData7[0].consumption=(this.tableData7[0].payMoney/this.tableData7[0].paymentPeople).toFixed(2);
                    //折线图数据(只需要30天数据)

                    let payMoneyList = [];      //付款金额
                    let refundMoneyList = [];   //退款金额
                    let paymentPeopleList = []; //付款人数
                    let payOrderNumList = [];   //付款件数
                    let orderConversion = [];   //下单转化率:下单人数/浏览人数
                    let paymentConversion = []; //付款转换率:付款人数/下单人数
                    let turnoverConversion = [];//成交转换率:付款人数/浏览人数

                    let dateList = [];          //日期列表

                    //表格30天统计数据
                    for (let i = 0; i < 30 && i < this.tableData.length; i++) {
                        this.placeMoney += this.tableData[i].placeMoney;
                        this.refundMoney += this.tableData[i].refundMoney;
                        this.payMoney += this.tableData[i].payMoney;
                        this.allGoodsNum += this.tableData[i].allGoodsNum;
                        this.allOrderNum += this.tableData[i].allOrderNum;
                        this.orderSuccessfulNum += this.tableData[i].orderSuccessfulNum;
                        this.payOrderNum += this.tableData[i].payOrderNum;
                        this.payGoodsNum += this.tableData[i].payGoodsNum;
                        this.browsePeople += this.tableData[i].browsePeople;
                        this.ordersPeople += this.tableData[i].ordersPeople;
                        this.paymentPeople += this.tableData[i].paymentPeople;

                        //折线图数组数据
                        payMoneyList.push(this.tableData[i].payMoney);
                        refundMoneyList.push(this.tableData[i].refundMoney);
                        paymentPeopleList.push(this.tableData[i].paymentPeople);
                        payOrderNumList.push(this.tableData[i].payOrderNum);


                        //下单转换率
                        if (this.tableData[i].ordersPeople == 0 || this.tableData[i].browsePeople == 0) {
                            orderConversion.push(0);
                        } else {
                            let starzxt1 = JSON.stringify(this.tableData[i].ordersPeople);
                            let objzxt1 = JSON.parse(starzxt1);
                            orderConversion.push(((objzxt1 / this.tableData[i].browsePeople) * 100).toFixed(2));
                        }

                        //付款转换率
                        if (this.tableData[i].paymentPeople == 0 || this.tableData[i].ordersPeople == 0) {
                            paymentConversion.push(0);
                        } else {
                            let starzxt2 = JSON.stringify(this.tableData[i].paymentPeople);
                            let objzxt2 = JSON.parse(starzxt2);
                            paymentConversion.push(((objzxt2 / this.tableData[i].ordersPeople) * 100).toFixed(2));
                        }


                        //成交转换率
                        if (this.tableData[i].paymentPeople == 0 || this.tableData[i].browsePeople == 0) {
                            turnoverConversion.push(0);
                        } else {
                            let starzxt3 = JSON.stringify(this.tableData[i].paymentPeople);
                            let objzxt3 = JSON.parse(starzxt3);
                            turnoverConversion.push(((objzxt3/ this.tableData[i].browsePeople) * 100).toFixed(2));
                        }
                        dateList.push((this.tableData[i].startTime).substr(0,10));
                    }

                    //创建折线图
                    let myChart = echarts.init(document.getElementById('main'));
                    let option = {
                        title: {
                            text: '30天交易一览'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['付款金额', '退款金额', '付款人数', '付款件数', '下单转化率(%)', '付款转换率(%)', '成交转换率(%)']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dateList  //日期列表
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '付款金额',
                                type: 'line',
                                stack: '总量1',
                                data: payMoneyList
                            },
                            {
                                name: '退款金额',
                                type: 'line',
                                stack: '总量2',
                                data: refundMoneyList
                            },
                            {
                                name: '付款人数',
                                type: 'line',
                                stack: '总量3',
                                data: paymentPeopleList
                            },
                            {
                                name: '付款件数',
                                type: 'line',
                                stack: '总量4',
                                data: payOrderNumList
                            },
                            {
                                name: '下单转换率(%)',
                                type: 'line',
                                stack: '总量51',
                                data: orderConversion
                            },
                            {
                                name: '付款转换率(%)',
                                type: 'line',
                                stack: '总量6',
                                data: paymentConversion
                            },
                            {
                                name: '成交转换率(%)',
                                type: 'line',
                                stack: '总量7',
                                data: turnoverConversion
                            }
                        ]
                    };

                    let myChart0 = echarts.init(document.getElementById('main0'));
                    let option0 = {
                        title: {
                            text: '漏斗图',
                            subtext: '30天'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c}"
                        },
                        toolbox: {
                            feature: {
                                dataView: {readOnly: false},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            data: ['浏览', '下单', '付款']
                        },
                        calculable: true,
                        series: [
                            {
                                name: '漏斗图',
                                type: 'funnel',
                                left: '10%',
                                top: 60,
                                //x2: 80,
                                bottom: 60,
                                width: '80%',
                                // height: {totalHeight} - y - y2,
                                min: 0,
                                max: 360000,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 20
                                    }
                                },
                                data: [
                                    {value: this.tableData30[0].browsePeople, name: '浏览'},
                                    {value: this.tableData30[0].ordersPeople, name: '下单'},
                                    {value: this.tableData30[0].paymentPeople, name: '付款'}
                                ]
                            }
                        ]
                    };

                    let myChart1 = echarts.init(document.getElementById('main1'));
                    let option1 = {
                        title: {
                            text: '漏斗图',
                            subtext: '7天'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c}"
                        },
                        toolbox: {
                            feature: {
                                dataView: {readOnly: false},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            data: ['浏览', '下单', '付款']
                        },
                        calculable: true,
                        series: [
                            {
                                name: '漏斗图',
                                type: 'funnel',
                                left: '10%',
                                top: 60,
                                //x2: 80,
                                bottom: 60,
                                width: '80%',
                                // height: {totalHeight} - y - y2,
                                min: 0,
                                max: 80000,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 20
                                    }
                                },
                                data: [
                                    {value: this.tableData7[0].browsePeople, name: '浏览'},
                                    {value: this.tableData7[0].ordersPeople, name: '下单'},
                                    {value: this.tableData7[0].paymentPeople, name: '付款'}
                                ]
                            }
                        ]
                    };

                    let myChart2 = echarts.init(document.getElementById('main2'));
                    let option2 = {
                        title: {
                            text: '漏斗图',
                            subtext: '昨日'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c}"
                        },
                        toolbox: {
                            feature: {
                                dataView: {readOnly: false},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            data: ['浏览', '下单', '付款']
                        },
                        calculable: true,
                        series: [
                            {
                                name: '漏斗图',
                                type: 'funnel',
                                left: '10%',
                                top: 60,
                                //x2: 80,
                                bottom: 60,
                                width: '80%',
                                // height: {totalHeight} - y - y2,
                                min: 0,
                                max: 20000,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 20
                                    }
                                },
                                data: [
                                    {value: this.tableData[0].browsePeople, name: '浏览'},
                                    {value: this.tableData[0].ordersPeople, name: '下单'},
                                    {value: this.tableData[0].paymentPeople, name: '付款'}
                                ]
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    myChart0.setOption(option0);
                    myChart1.setOption(option1);
                    myChart2.setOption(option2);
                })
            }

        }
    })

</script>

</html>
